import React, { useState } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { Card, Typography, Button } from 'antd';

const { Title, Paragraph } = Typography;

const CKEditorPage: React.FC = () => {
  const [data, setData] = useState('<p>这是 CKEditor 编辑器的初始内容。</p>');

  const handleGetContent = () => {
    console.log(data);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>CKEditor 富文本编辑器</Title>
        <Paragraph>
          CKEditor 是一个现代化的富文本编辑器，提供了优秀的用户体验和丰富的功能。
        </Paragraph>
        
        <div style={{ marginTop: '20px' }}>
          <CKEditor
            editor={ClassicEditor}
            data={data}
            onReady={(editor) => {
              console.log('Editor is ready to use!', editor);
            }}
            onChange={(event, editor) => {
              const data = editor.getData();
              setData(data);
            }}
            onBlur={(event, editor) => {
              console.log('Blur.', editor);
            }}
            onFocus={(event, editor) => {
              console.log('Focus.', editor);
            }}
          />
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
        </div>
      </Card>
    </div>
  );
};

export default CKEditorPage;